<template>
	<view class="echartcontent">
		<view class="info-header">
			<text>设备呢称：
				{{ this.$store.state.areaObject.device == null ? '' : this.$store.state.areaObject.device.beizhu
                }}</text>
		</view>
		<view class="info-content">
			<text>设备号:
				{{ this.$store.state.areaObject.device == null ? this.$store.state.areaObject.shebeibianhao :
                    this.$store.state.areaObject.device.shebeibianhao }}</text>
		</view>
		<view class="button-group-echats">
			<button class="time-btn" :class="{ 'active-btn': selectedPeriod === '1' }" @click="changePeriod('1')">
				近一日
			</button>
			<button class="time-btn" :class="{ 'active-btn': selectedPeriod === '2' }" @click="changePeriod('2')">
				近一周
			</button>
			<button class="time-btn" :class="{ 'active-btn': selectedPeriod === '3' }" @click="changePeriod('3')">
				近一月
			</button>
			<button class="time-btn" :class="{ 'active-btn': selectedPeriod === '4' }" @click="changePeriod('4')">
				自定义
			</button>
		</view>
		<view class="charts-box">
			<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
		</view>
		<TimeSelect ref="timeSelect" @fetchQuery='fetchQuery'></TimeSelect>
	</view>

</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import {
		getbigscreenEcharts
	} from '../../api/index.js'
	import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
	import TimeSelect from '@/components/TimeSelect'
	export default {
		computed: {
			...mapState(['areaObject'])
		},
		components: {
			uCharts,
			TimeSelect
		},
		watch: {
			areaObject: {
				handler: function(val, oldVal) {
					this.bindArea()
				},
				// deep: true,
				immediate: true
			}
		},
		data() {
			return {
				searchTime: [],
				selectedPeriod: "1", // 当前选中的时间段
				chartData: {
					categories: [],
					series: [{
						name: "数据",
						data: [],
					}, ],
				},
				opts: {
					color: ["#91CB74", "#1890FF", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					dataLabel: false,
					dataPointShape: false,
					enableScroll: false,
					legend: {},


					xAxis: {
						disableGrid: true,

					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,


					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							onShadow: true,
							activeType: "hollow",
							linearType: "custom"
						}
					}
				},
			}
		},
		mounted() {
			// this.initChart(); // 初始化折线图
		},
		methods: {
			fetchQuery(e) {
				console.log(e)
				this.searchTime = e
				this.updateChartData('4');
			},
			bindArea() {
				if (this.areaObject.shebeibianhao != 0) {
					// if (this.areaObject.shebeibianhao != '') { }
					uni.setNavigationBarTitle({
						title: this.areaObject.shebeibianhao
					});
					this.initChart()
				} else {
					uni.setNavigationBarTitle({
						title: ''
					});


				}

			},
			// 初始化折线图数据
			initChart() {
				// 根据默认的时间段（例如 'day'）设置图表数据
				this.updateChartData('1');
			},
			// 切换时间段
			changePeriod(period) {
				this.selectedPeriod = period;
				if (period != 4) {
					this.updateChartData(period); // 更新图表数据
				} else {
					this.$refs.timeSelect.showEdit()
				}

			},
			updateChartData(period) {
				console.log(period)
				if (this.areaObject.shebeibianhao == '' || this.areaObject.shebeibianhao == 0) {} else {
					let obj = {
						shebeibianhao: this.areaObject.shebeibianhao,
						date_type: period
					}
					if (period == '4') {
						obj.startTime = this.searchTime[0]
						obj.endTime = this.searchTime[1]
					}
					getbigscreenEcharts(obj).then(res => {
						console.log(res)
						if (res.code == 200) {
							this.$nextTick(function() {
								this.drawLine(res.data.time, res.data.value)
							})

						}
					})
				}


			},
			drawLine(timeArr, valueArr) {
				let seriesArr = valueArr.map(item => {
					return {
						name: item.name,
						data: item.value
					}
				})
				console.log(seriesArr)
				// 更新图表数据
				this.chartData = {
					categories: timeArr,
					series: seriesArr
				}
			}
		}
	}
</script>

<style scoped>
	.echartcontent {
		padding-top: 50px;
	}

	.info-header {
		font-size: 16px;
		font-weight: 400;
	}

	.info-content {
		display: flex;
		justify-content: flex-start;
		font-size: 13px;
		font-weight: 300;
		margin-bottom: 10px;
	}

	.button-group-echats {
		display: flex;
		justify-content: space-around;
		margin-bottom: 20px;
		height: 24px;
		line-height: 24px;
		align-items: center;
	}

	.time-btn {
		background-color: #79BBFF;
		color: #fff;
		border-radius: 5px;
		border: none;
		font-size: 13px;
		flex: 1;

		text-align: center;
	}

	.time-btn:not(:last-child) {
		margin-right: 10px;
	}

	.active-btn {
		background: #1C47E2;
		color: #fff;
	}
</style>